<!--
 * @Author: C.
 * @Date: 2021-09-03 10:47:43
 * @LastEditTime: 2021-09-06 15:53:28
 * @Description: file content
-->

<template>
  <a-button type="dashed" class="btn" shape="round" @click="addFieldShow(true)">添加列表</a-button>
  <Divider style="border-color: #971515" dashed />
  <TableItem v-for="item in block" :key="item.id" :cdata="item" />
  <AddField
    @register="addFieldRegister"
    @success="addTable"
    title="添加表格"
    :formSchema="AddTableForm"
  />
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { Divider } from 'ant-design-vue';
  import { usePrintStore } from '/@/store/modules/print';
  import { TableConstructor } from '../../../../../../utils';
  import { AddTableForm } from '../../form.config';
  import AddField from '../Block/cpn/AddField.vue';
  import TableItem from './cpn/TableItem.vue';
  // import AddField from './cpn/AddField.vue';
  import { useModal } from '/@/components/Modal';
  export default defineComponent({
    components: { TableItem, AddField, Divider },
    props: {
      name: {
        type: String,
        default: 'table',
      },
    },
    setup(props) {
      let printStore = usePrintStore();
      let block = printStore.printTemplate[props.name];

      const [addFieldRegister, { openModal: addFieldShow }] = useModal();

      function addTable(e) {
        block.push(TableConstructor(e.prop, e.title));
      }
      return {
        block,
        AddTableForm,
        addFieldRegister,
        addFieldShow,
        addTable,
      };
    },
  });
</script>
<style lang="less" scoped>
  .btn {
    margin-right: 10px;
    margin-bottom: 10px;
  }
</style>
